<template>
 <TodoInput @addTodo="addTodo"/>
 <TodoList 
 :todos="todos"
 @remove="removeTodo"
 />
</template>
<script setup>
import {ref,reactive} from 'vue'
import TodoInput from './TodoInput.vue';
import TodoList from './TodoList.vue';
const todos = reactive([]);
function addTodo(text){
    //向todos里添加一个新的todo
    todos.push({
        id:Date.now(),
        text,
        completed:false
    });
    console.log(todos)
}
const removeTodo = (todo)=>{
    let index = todos.findIndex(item=>item===todo);
    if(index !== -1){
        todos.splice(index,1);
    }
}
</script>
<style>
</style>